<script setup>
//转移代码位置
import Login_card from "@/components/login_card.vue";
import { loadAnim } from "@/js/load_lottie";
import { onMounted, ref } from "vue";
onMounted(() => {
  const container = document.querySelectorAll(".login_background");
  const extra_element_first = loadAnim(
    container[0],
    true,
    true,
    "svg",
    require("@/assets/lottie/login_extra.json")
  );
  const extra_element = loadAnim(
    container[1],
    true,
    true,
    "svg",
    require("@/assets/lottie/login_background.json")
  );
});
</script>
<template>
  <div class="h-[100vh] w-[100%] back flex justify-center items-center">
    <div class="flex-col flex justify-center items-center flex-grow">
      <Login_card class="backdrop-blur-2xl"> </Login_card>
    </div>
  </div>
</template>
<style>
.back {
  /* 替换为PNG图片背景 */
  background-image: url('@/assets/background.png'); /* 修改为您的图片路径 */
  background-size: cover; /* 确保图片覆盖整个区域 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center center; /* 图片居中显示 */
  
  /* 可选：添加半透明遮罩使内容更易读 */
  position: relative;
}

/* 可选：添加半透明遮罩 */
.back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3); /* 白色半透明遮罩 */
  z-index: 0;
}

/* 确保登录卡片在遮罩上方 */
.flex-col {
  position: relative;
  z-index: 1;
}
</style>